<template>
  <el-dialog
    title="列表管理"
    width="910px"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    modal-append-to-body
    append-to-body
    top="8vh"
    class="Fg-dialog2"
    destroy-on-close
  >
    <el-table class="Fg-table-head" :data="data" size="small" border stripe style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="prop" label="字段名称" width="120" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.prop" maxlength="50" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="label" label="标题" width="120" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.label" maxlength="50" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度" width="120" align="center">
        <template slot-scope="scope">
          <el-input type="number" v-model.number="scope.row.width"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="align" label="对齐方式" width="120" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.align" :style="{ width: '100%' }">
            <el-option label="左对齐" value="left" />
            <el-option label="居中" value="center" />
            <el-option label="右对齐" value="right" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="render" label="渲染" width="120" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.render" :style="{ width: '100%' }">
            <el-option label="文本" value="text" />
            <el-option label="标签" value="tag" />
            <el-option label="图片" value="img" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="隐藏" width="120" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.hide"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleAdd(scope.$index+1)">添加</el-button>
          <el-button type="text" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button icon="el-icon-circle-plus-outline" type="text" @click="handleAdd(data.length)">添加</el-button>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deepClone } from "../utils";
export default {
  name: "TableDialog",
  props: {
    value: {},
  },
  data() {
    return {
      dialogVisible: false,
      data: this.value,
    };
  },
  methods: {
    open(data) {
      this.data = deepClone(data || this.value);
      this.dialogVisible = true;
    },
    confirm() {
      this.$emit("input", this.data);
      this.$emit("confirm", this.data);
      this.dialogVisible = false;
    },
    handleDelete(scope) {
      this.data.splice(scope?.$index, 1);
    },
    handleAdd(index) {
      this.data.splice(index, 0, {
        prop: "",
        label: "",
        width: "",
        align: "center",
        render: "text",
        hide: false,
      });
    },
  },
};
</script>

<style lang="scss" >
.Fg-table-head {
  .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
}
</style>